<template>
	<view>
		<uni-popup ref="popup" type="center" border-radius="10px 10px 10px 10px" @maskClick="handleConfigClick(false)">
			<view class="prompt_box">
				<view class="tit">{{msg.title}}</view>
				<view class="warn">请输入验证码核实身份</view>
				<view class="msg">
					<text class="m-val" v-for="i in 6" :key="i">{{codeList[i]||''}}</text>
					<input ref="myInput" class="c-input" type="text" maxlength="6" v-model.trim="code" focus="true" />
				</view>
				<view class="btns">
					<view class="btn1" @click="handleConfigClick(false)">{{msg.cancel}}</view>
					<view class="btn2" @click="handleConfigClick(true)">{{msg.config}}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		computed: {
			codeList() {
				const c = String(this.code)
				return c ? c.split('') : []
			}
		},
		data() {
			return {
				msg: {
					title: '验证提醒',
					content: '',
					cancel: '取消操作',
					config: '确认验证'
				},
				code: '',
				time: 60
			}
		},
		methods: {
			open(msg) {
				this.msg = {
					...this.msg,
					...msg
				};
				setTimeout(() => {
					this.$refs.popup.open()
					this.setTime()
				}, 1)
			},
			setTime() {
				setTimeout(() => {
					this.time--
					if (this.time <= 0) {
						this.time = 0
					} else {
						this.setTime()
					}
				}, 1000)
			},
			close() {
				this.code = ''
				this.$refs.popup.close();
			},
			handleConfigClick(e) {
				if (e && this.code.length != 6) {
					this.$api.msg('请正确输入验证码！')
					return
				}
				this.$emit('config', {
					type: e,
					code: this.code
				})
				this.close()
			},
		}
	}
</script>

<style lang="scss">
	.prompt_box {
		width: 574rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 40rpx 40rpx 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.tit {
			font-family: 思源黑体;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			color: #13001E;
		}

		.warn {
			padding-top: 16rpx;
			color: #9A1FE8;
			font-size: 24rpx;
		}
		.warn2{
			color: #999999;
			font-size: 24rpx;
			padding: 20rpx;
		}

		.msg {
			display: flex;
			align-items: center;
			padding: 30rpx;
			border-bottom: 2rpx solid rgba(153, 153, 153, 0.1);
			position: relative;

			.m-val {
				width: 66rpx;
				height: 78rpx;
				line-height: 78rpx;
				border-radius: 16rpx;
				box-sizing: border-box;
				border: 2rpx solid #5B5B5B;
				margin-right: 12rpx;
				text-align: center;
			}

			.m-val:last-child {
				margin: 0;
			}

			.c-input {
				opacity: 0;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}

		.btns {
			width: 100%;
			// background-color: pink;
			display: flex;
			// align-items:;
			justify-content: space-between;
			margin-top: 20rpx;

			view {
				width: 248rpx;
				height: 86rpx;
				border-radius: 16rpx;
				font-size: 28rpx;
				line-height: 86rpx;
				text-align: center;
			}

			.btn1 {
				background: #f0defc;
				color: #9A1FE8;
			}

			.btn2 {
				color: #FFFFFF;
				background: #9A1FE8;
			}
		}
	}
</style>